<template>
  <el-card class="mt-10">
    <div class="chart-container" ref="chartRef"></div>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "PieChart",
};
</script>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

const chartRef = ref();

onMounted(() => {
  const myEchart = echarts.init(chartRef.value);

  const axisX = [
    "粉面粥店",
    "简餐便当",
    "汉堡披萨",
    "香锅冒菜",
    "小吃炸串",
    "地方菜系",
    "轻食简餐",
  ];
  const data1 = [56, 52, 95, 41, 30, 69, 63];

  const data = axisX.map((item, index) => {
    return {
      name: item,
      value: data1[index],
    };
  });

  const option = {
    title: [
      {
        text: "品类分布",
      },
      {
        text: "累计订单量",
        subtext: 406,
        left: "center",
        top: "45%",
        textStyle: {
          fontSize: 14,
        },
        subtextStyle: {
          fontSize: 25,
        },
      },
    ],
    legend: {
      top: "middle",
      right: 0,
      orient: "vertical",
      formatter: function (name: string) {
        const index = axisX.findIndex((item) => item === name);
        const value = data1[index];
        const percent = (value / data1.reduce((p, c) => p + c, 0)) * 100;
        return `${name} | ${percent.toFixed(2)} %`;
      },
    },
    series: {
      type: "pie",
      data,
      radius: ["40%", "60%"],
      itemStyle: {
        borderWidth: 2,
        borderColor: "#fff",
      },
    },
  };
  myEchart.setOption(option);
});
</script>

<style scoped>
.chart-container {
  width: 600px;
  height: 400px;
}
</style>
